<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information Form</title>
</head>
<body>
    <h2>Student Information Form</h2>

    <form id="studentForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="gender">Gender:</label>
        <select id="gender" name="gender" required>
            <option value="">Select an option</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select><br><br>

        <input type="submit" value="Submit">
    </form>

    <script>
        document.getElementById('studentForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            const name = document.getElementById('name').value;
            const gender = document.getElementById('gender').value;

            fetch('ws/student', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `name=${name}&gender=${gender}`
            })
            .then(response => response.json())
            .then(result => {
                alert(result.data.name + ", " + result.data.gender);
                // You can add code here to handle the response from the server
            })
            .catch(error => console.error('Error submitting form:', error));
        });
    </script>
</body>
</html>